@import './../style.scss';
@import 'taro-ui/dist/style/components/tabs.scss';

@include fontSize {
  &.home {
    .title {
      font-size: themed('big');
    }

    .card-info,
    .score {
      font-size: themed('small');
    }

    .card-content {
      font-size: themed('normal');
    }
  }
}

@include themeify {
  &.home {
    height: 100%;
    background: themed('bgColor');


    .tab {
      width: auto;

      &.blur {
        filter: blur($blur);
      }

      .at-tabs__header {
        position: absolute;
        color: themed('titleColor');
        background: themed('cardBgColor');
        border-radius: themed('cardRadius');
        text-align: start;
        padding: 0 10px;
        box-shadow: 0px 4px 12px 2px themed('shadowColor');
        z-index: 1;
        width: 96%;
        left: 2%;
        top: 20px;

        .at-tabs__item {
          padding: 15px 15px;
          color: themed('titleColor');

          &.at-tabs__item--active {

            color: themed('titleColor');

          }

          .at-tabs__item-underline {
            background: themed('brightColor');
            width: auto;
            position: initial;
            height: 6px;
            margin-top: 2px;
          }
        }
      }

      .at-tabs__underline {
        display: none;
      }

      .at-tabs__body {
        height: 100%;
      }

      .at-tabs-pane {
        height: 100%;
      }

      .sub-tab-view {
        height: 100%;

        .list {
          background: themed('bgColor');
        }

        .tags {
          margin-bottom: 20px;
        }

        .space-card {
          height: 100px;
        }

        .card {

          border-radius: themed('cardRadius');
          margin: 26px 2%;
          padding: 16px;
          background: themed('cardBgColor');
          box-shadow: 0px 4px 12px 2px themed('shadowColor');

          .card-head {

            .title {

              color: themed('titleColor');
              white-space: pre-wrap;
              text-align: start;
            }

            .score {
              text-align: end;
              color: transparent;

              &.s50 {
                color: #8fb2c9;
              }

              &.s60 {
                color: #495c69;
              }

              &.s70 {
                color: #83cbac;
              }

              &.s80 {
                color: #5698c3;
              }

              &.s90 {
                color: #983680;
              }

              &.s100 {
                color: #ffa60f;
              }
            }
          }

          .card-content {
            color: themed('grayFontColor');
            margin-bottom: 8px;
            text-align: start;
          }

          .card-foot {
            .at-tag {
              background: themed('bgColor');
              box-shadow: initial;
            }

            .card-info {
              color: themed('grayFontColor');

              text,
              taro-text-core {
                margin: 0 10px;
              }
            }
          }

        }
      }
    }

    .no-login {
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      text-align: center;
      color: themed('grayFontColor');

      >text,
      >taro-text-core {
        color: themed('brightColor');
        font-size: 72px;
        margin-bottom: 30px;
      }
    }

  }
}
